import React, { PureComponent, createRef } from 'react';

class App extends PureComponent {
  constructor(props) {
    super(props)
    this.titleRef = createRef()
    this.titleEl = null
  }
  render() {
    return (
      <div>
        {/* 字符串方式 这种方式会被删除 */}
        <h2 ref="title">String Ref</h2>
        {/* 对象方式 react推荐的方式 */}
        <h2 ref={this.titleRef}>Hello Create Ref</h2>
        {/* 回调函数方式 */}
        <h2 ref={element => this.titleEl = element}>Callback Ref</h2>

        <button onClick={e => this.changeText()}>改变文本</button>
      </div>
    )
  }
  changeText() {
    // 字符串 这种方式会被删除
    this.refs.title.innerHTML = "你好啊，李银河"
    // 对象方式 react推荐的方式 
    this.titleRef.current.innerHTML = "你好啊,李银河";
    this.titleEl.innerHTML = "你好啊,李银河";
  }
}

App.propTypes = {

};

export default App;